<script setup lang="ts">
import {
  ElButton,
  ElMessage,
  ElMessageBox,
  ElImage,
  ElSpace,
  ElTag,
  ElDivider,
} from "element-plus";

import ByDescription from "@/components/common/ByDescription.vue";
import ByDescriptionItem from "@/components/common/ByDescriptionItem.vue";

import useCategory from "@/hooks/useCategory";
import useRequest from "@/hooks/useRequest";
import useEnum from "@/hooks/useEnum";

import ApiMerchant from "@/api/merchant";
import ApiUser from "@/api/users";

import { TMerchantApplyied, TUserDetail } from "@/global";

const props = defineProps<{
  source?: TMerchantApplyied;
  modalApi?: any;
}>();

const source = props.source!;

const emits = defineEmits<{
  success: [];
}>();

// 审核
const {
  isFetching: loadingWithAudit,
  run,
  onFetchResponse,
} = useRequest(ApiMerchant.merchantApplyAudit, {
  immediate: false,
});

onFetchResponse(() => {
  ElMessage.success("操作成功");
  emits("success");
});

// 通过1 驳回2
const handleReject = async (status: 1 | 2) => {
  const title = status == 1 ? "通过" : "驳回";
  let audit_reason;
  // if (status == 2) {
  //   const { value } = await ElMessageBox.prompt(title, {
  //     inputPattern: status == 2 ? /^(\s|\S){1,16}$/ : undefined,
  //     inputPlaceholder: "请输入原因",
  //     confirmButtonText: "确定驳回",
  //     inputErrorMessage: "请输入驳回原因"
  //   });

  //   audit_reason = value;
  // } else {
  //   await ElMessageBox.alert("确定审核通过操作？", "审核提示");
  // }

  await ElMessageBox.alert(`确定${title}操作？`, "审核提示");

  run({
    audit_reason,
    id: source.id,
    audit_status: status,
  });
};

const { map: mapCategory } = useCategory();

const formItems: any[] = [
  {
    label: "品牌名",
    field: "merchant_title",
  },
  {
    label: "类型",
    field: "merchant_type",
    // renderText: (data: any) => getCategory(data, "title")
  },
  {
    label: "品牌地址",
    renderText: (data: any) => data?.province + data.city + data.district,
  },
  {
    label: "营业时间",
    field: "merchant_time",
  },
  {
    label: "门店数量",
    field: "merchant_size",
  },

  {
    label: "品牌介绍",
    field: "merchant_desc",
    span: 2,
  },

  {
    label: "参与其他活动",
    field: "merchant_desc",
    span: 2,
    renderText: () => {
      const val = source.history_act;

      if (val) {
        return (
          val
            .split(",")
            // @ts-expect-error
            .map((e) => historyMap[e])
            .join("、")
        );
      }

      return "无";
    },
  },

  {
    label: "营业执照",
    type: "image",
    field: "business_license",
  },

  {
    label: "品牌Logo",
    type: "image",
    field: "merchant_logo_png",
  },

  {
    label: "门店图片",
    type: "image",
    field: "merchant_img",
  },

  {
    label: "产品图片",
    type: "image",
    field: "product_img",
  },
];

// 拆分图片
const getImageUrls = (urlStr?: string) => (urlStr ? urlStr.split(";") : []);

// 状态
const { get: getAuditStatus } = useEnum("EnumSettledAuditStatus");

const historyMap = {
  1: "唤醒咖啡节",
  2: "其他吃的嘉年华主办活动",
  3: "不止微醺节",
  4: "甜品嘉年华",
  5: "其他主办方活动",
};

// 商户绑定的用户信息
const { data: userDetail } = useRequest<TUserDetail>(ApiUser.userInfoDetail, {
  defaultParams: { id: source.user_id },
});
</script>

<template>
  <ByDescription :column="1" label-suffix=":">
    <ByDescriptionItem label="审核状态">
      <ElTag size="large" :type="getAuditStatus(source.audit_status, 'color')">
        {{ getAuditStatus(source.audit_status) }}
      </ElTag>
    </ByDescriptionItem>

    <ByDescriptionItem v-if="source.audit_status == 2" label="驳回原因">
      {{ source.audit_reason }}
    </ByDescriptionItem>
  </ByDescription>

  <div class="pt-3">
    <ElDivider content-position="left">绑定人信息</ElDivider>
  </div>

  <ByDescription label-suffix=":" :column="2">
    <ByDescriptionItem label="头像" :span="2">
      <ElImage
        v-if="userDetail?.avatar"
        :src="userDetail?.avatar"
        class="w-60px h-60px"
      />
      <span v-else>暂无头像</span>
    </ByDescriptionItem>

    <ByDescriptionItem label="昵称">{{
      userDetail?.nickname
    }}</ByDescriptionItem>
    <ByDescriptionItem label="手机号">{{
      userDetail?.mobile
    }}</ByDescriptionItem>
  </ByDescription>

  <div class="pt-3">
    <ElDivider class="mb-3" content-position="left">商户信息</ElDivider>
  </div>

  <ByDescription :column="2" label-width="7em" label-suffix=":">
    <template v-for="(item, index) in formItems" :key="index">
      <ByDescriptionItem
        :label="item.label"
        :span="item.type == 'image' ? 2 : item.span ?? 1"
      >
        <ElSpace v-if="item.type == 'image'">
          <ElImage
            v-for="src in getImageUrls(source[item.field])"
            class="w-[100px] h-[100px] rounded-lg bg-[#eee]"
            :src="src"
            :initial-index="index"
            :preview-src-list="getImageUrls(source[item.field])"
          />
        </ElSpace>

        <span v-else-if="item.field == 'merchant_type'">
          {{ mapCategory?.get(source.merchant_type).title }}
        </span>

        <span v-else>
          {{ item.renderText ? item.renderText(source) : source[item.field] }}
        </span>
      </ByDescriptionItem>
    </template>
  </ByDescription>

  <div class="mt-6 text-center" v-if="source?.audit_status == 0">
    <ElButton
      plain
      size="large"
      type="danger"
      class="w-[100px]"
      :disabled="loadingWithAudit"
      @click="handleReject(2)"
    >
      驳回
    </ElButton>
    <ElButton
      size="large"
      type="primary"
      class="w-[100px]"
      :disabled="loadingWithAudit"
      @click="handleReject(1)"
      >通过
    </ElButton>
  </div>
</template>
